<template>
  <van-nav-bar
    class="search"
    title="新闻详情"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="newdeatil">
    <h1 class="h1">
      {{ newinfo.title }}
    </h1>
    <div class="tags">
      <van-tag class="tag" round type="primary"
        >{{ newinfo.username }}
      </van-tag>
      <van-tag class="tag" round type="primary"
        >{{ newinfo.new_type }}
      </van-tag>
      <van-tag class="tag" round type="primary">{{ newinfo.created }} </van-tag>
    </div>
    <van-divider content-position="left"></van-divider>
    <div v-html="newinfo.content"></div>
    <CommonComment :id="id" />
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { NewsService } from "@/api/news";
import { Toast } from "vant";
import CommonComment from "@/components/comment/index.vue";
export default {
  name: "newDatil",
  components: { CommonComment },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };

    let data = reactive({
      onClickLeft: onClickLeft,
      id: Number(route.query.id),
      newinfo: {},
    });
    const findNew = () => {
      NewsService.findNew(data.id).then((res) => {
        if (res.data.code === 0) {
          data.newinfo = res.data.data;
        } else {
          Toast(res.data.message);
        }
      });
    };
    findNew();
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less">
.search {
  position: fixed;
  z-index: 999;
  top: 0;
  height: 50px;
  width: 100%;
}
[class^="language"] {
  background-color: antiquewhite;
  padding: 10px 15px;
  font-size: 16px;
  overflow-x: auto;
}
.newdeatil {
  padding: 10px 15px;
  margin-top: 50px;
  img {
    display: flex;
    width: 100%;
    margin: auto;
    border-radius: 10px;
  }
  .h1 {
    font-size: 22px;
    font-weight: 500;
  }
  .tags {
    .tag {
      margin-right: 10px;
    }
  }
}
</style>